<template>
	<view class="container">
		<view class="control-panel">
			<view class="panel-header">
				<text>客厅智能灯带</text>
				<switch :checked="isPowerOn" @change="powerSwitchChange" />
			</view>

			<!-- 亮度调节 -->
			<view class="control-item">
				<text class="label">亮度: {{ brightness }}%</text>
				<slider
					class="slider-control"
					:value="brightness"
					:min="0"
					:max="100"
					:step="5"
					:disabled="!isPowerOn"
					:activeColor="'#FFD700'"
					:backgroundColor="'#333333'"
					:block-color="'#FFFFFF'"
					:block-size="24"
					show-value
					@changing="onBrightnessChanging"
					@change="onBrightnessChange"
				/>
			</view>

			<!-- 色温调节 -->
			<view class="control-item">
				<text class="label">色温: {{ colorTemp }}K</text>
				<slider
					class="slider-control"
					:value="colorTemp"
					:min="2700"
					:max="6500"
					:step="100"
					:disabled="!isPowerOn"
					activeColor="#4A90E2"
					backgroundColor="#333333"
					block-color="#FFFFFF"
					:block-size="24"
					@changing="onColorTempChanging"
					@change="onColorTempChange"
				/>
			</view>

			<view class="logs">
				<text class="log-title">操作日志:</text>
				<view v-for="(log, index) in logs" :key="index" class="log-entry">{{ log }}</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			isPowerOn: true, // 电源状态
			brightness: 80, // 当前亮度值
			colorTemp: 4000, // 当前色温值
			logs: []
		};
	},
	methods: {
		// 控制总电源
		powerSwitchChange(e) {
			this.isPowerOn = e.detail.value;
			const status = this.isPowerOn ? '开启' : '关闭';
			this.addLog(`设备电源已${status}。`);
			if (!this.isPowerOn) {
				this.addLog('亮度与色温调节已禁用。');
			} else {
				this.addLog('亮度与色温调节已启用。');
			}
		},

		// 1. @changing: 拖动过程中实时更新UI，提供即时反馈
		onBrightnessChanging(e) {
			// 仅更新本地数据，不发送指令
			this.brightness = e.detail.value;
		},

		// 2. @change: 拖动结束后，发送最终指令
		onBrightnessChange(e) {
			const finalValue = e.detail.value;
			this.brightness = finalValue;
			this.addLog(`指令发送: 设置亮度为 ${finalValue}%。`);
			// 此处模拟API调用
			// sendCommandToDevice({ brightness: finalValue });
		},

		onColorTempChanging(e) {
			this.colorTemp = e.detail.value;
		},

		onColorTempChange(e) {
			const finalValue = e.detail.value;
			this.colorTemp = finalValue;
			this.addLog(`指令发送: 设置色温为 ${finalValue}K。`);
			// 此处模拟API调用
			// sendCommandToDevice({ colorTemp: finalValue });
		},

		addLog(message) {
			const time = new Date().toLocaleTimeString();
			this.logs.unshift(`[${time}] ${message}`);
			if (this.logs.length > 5) {
				this.logs.pop();
			}
		}
	}
};
</script>

<style>
.container {
	padding: 20px;
	background-color: #1c1c1e;
	color: #ffffff;
	min-height: 100vh;
}
.control-panel {
	background-color: #2c2c2e;
	border-radius: 12px;
	padding: 16px;
}
.panel-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 24px;
	font-size: 18px;
	font-weight: bold;
}
.control-item {
	margin-bottom: 20px;
}
.label {
	font-size: 16px;
	margin-bottom: 8px;
	display: block;
}
.slider-control {
	margin: 0 10px;
}
.logs {
	margin-top: 30px;
	border-top: 1px solid #444;
	padding-top: 15px;
}
.log-title {
	font-weight: bold;
	margin-bottom: 8px;
}
.log-entry {
	font-size: 12px;
	color: #8e8e93;
	line-height: 1.5;
}
</style>
